<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.11.1/theme-chalk/index.css">
  <style>
  </style>
</head>

<body style="background-color:#f8f8f8;">
  <div id="app">

    <!--公司信息dialog-->
    <el-dialog title="公司信息" :visible.sync="dialogCompanyVisible" width="50%">
      <div v-loading="companyDataLoading" style="height:200px;overflow-y:auto;">
        <el-form :model="companyData" :rules="rules" :disabled="dialogCompanyDisabled" label-width="120px" size="mini"
          style="margin-right: 30px;">
          <el-col :span="12">
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="companyData.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="companyData.contacts"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="companyData.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构代码">
              <el-input v-model="companyData.orgcode"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="companyData.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="companyData.email"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCompanyVisible = false">取 消</el-button>
        <el-button @click="dialogCompanyVisible = false" type="primary" :disabled="dialogCompanyDisabled">确 定
        </el-button>
      </div>
    </el-dialog>

    <!--部门信息dialog-->
    <el-dialog title="部门信息" :visible.sync="dialogOfficeVisible" width="50%">
      <div v-loading="officeDataLoading" style="height:200px;overflow-y:auto;">
        <el-form :model="officeData" :rules="rules" :disabled="dialogOfficeDisabled" label-width="120px" size="mini"
          style="margin-right: 30px;">
          <el-col :span="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="officeData.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="officeData.contacts"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="officeData.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构代码">
              <el-input v-model="officeData.orgcode"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="officeData.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="officeData.email"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOfficeVisible = false">取 消</el-button>
        <el-button @click="dialogOfficeVisible = false" type="primary" :disabled="dialogOfficeDisabled">确 定</el-button>
      </div>
    </el-dialog>

    <!--员工信息dialog-->
    <el-dialog title="员工信息" :visible.sync="dialogMemberVisible" width="50%">
      <div v-loading="memberDataLoading" style="height:300px;overflow-y:auto;">
        <el-form :model="memberData" :rules="rules" :disabled="dialogMemberDisabled" label-width="120px" size="mini"
          style="margin-right: 30px;">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="memberData.name"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="memberData.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="memberData.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证">
              <el-input v-model="memberData.idcard"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="memberData.position"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="memberData.status" clearable placeholder="请选择">
                <el-option label="在职" :value="1"></el-option>
                <el-option label="离职" :value="2"></el-option>
                <el-option label="停薪留职" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工编号">
              <el-input v-model="memberData.memberNo"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="memberData.email"></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker v-model="memberData.birthday" type="date" placeholder="选择日期" style="width: auto;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="家庭地址">
              <el-input v-model="memberData.address"></el-input>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker v-model="memberData.entryTime" type="date" placeholder="选择日期" style="width: auto;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="排序(高-低)">
              <el-input-number v-model="memberData.sort" :min="1" :max="10000" label="描述文字"></el-input-number>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMemberVisible = false">取 消</el-button>
        <el-button @click="dialogMemberVisible = false">重置密码</el-button>
        <el-button @click="dialogMemberVisible = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <!--员工移至其它部门-->
    <el-dialog title="请选择部门" :visible.sync="dialogMoveMemberVisible" width="30%">
      <div style="height:300px;overflow-y:auto;">
        <el-tree :data="tableData" :props="treeDefaultProps" accordion>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMoveMemberVisible = false">取 消</el-button>
        <el-button @click="dialogMoveMemberVisible = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card" style="margin-top: 5px;">
      <div>

        <div style="padding-bottom: 10px;">
          <el-row :gutter="20">
            <el-col :span="8">
              姓名：
              <el-input size="mini" style="width: 120px;" placeholder="请输入内容" suffix-icon="el-icon-date"
                v-model="input1">
              </el-input>
            </el-col>
            <el-col :span="8">
              电话：
              <el-input size="mini" style="width: 120px;" placeholder="请输入内容" suffix-icon="el-icon-date"
                v-model="input2">
              </el-input>
            </el-col>
            <el-col :span="8">
              身份证：
              <el-input size="mini" style="width: 120px;" placeholder="请输入内容" suffix-icon="el-icon-date"
                v-model="input3">
              </el-input>
            </el-col>
          </el-row>
        </div>

        <el-table v-loading="tableLoading" :data="tableData" style="width: 100%;margin-bottom: 20px;"
          :row-key="getRowKey" border :height="tableHeight" :max-height="tableHeight" size="mini" lazy :load="load"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="姓名" sortable width="240" fixed="left">
            <template slot-scope="scope">
              <el-link v-if="scope.row.type == 1" type="primary" icon="el-icon-s-shop" @click="selectScope(scope.row)">
                {{scope.row.name}}
              </el-link>
              <el-link v-if="scope.row.type == 2" type="success" icon="el-icon-s-order" @click="selectScope(scope.row)">
                {{scope.row.name}}
              </el-link>
              <el-link v-if="scope.row.type == 3" type="warning" icon="el-icon-user-solid"
                @click="selectScope(scope.row)">{{scope.row.name}}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" sortable width="60">
          </el-table-column>
          <el-table-column label="属性" width="160">
            <template slot-scope="scope">
              <el-tag size="small" v-for="tag in getAttribute(scope.row)" :type="tag.type" style="margin-right: 2px;">{{tag.name}}</el-tag> 
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column prop="contacts" label="联系人" sortable width="120">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" sortable width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editScope(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.type === 1" @click="addItem(scope.row, 2)" type="text" style="color:#67c23a;"
                size="small">添加部门</el-button>
              <el-button v-if="scope.row.type === 2" @click="addItem(scope.row, 2)" type="text" style="color:#67c23a;"
                size="small">添加下级部门</el-button>
              <el-button v-if="scope.row.type === 2" @click="addItem(scope.row, 3)" type="text" style="color:#e6a23c;"
                size="small">添加员工</el-button>
              <el-button v-if="scope.row.type === 3" @click="moveMember(scope.row)" type="text" style="color:#409eff;"
                size="small">移至其他部门</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" :total="2">
        </el-pagination>
      </div>
    </el-card>

  </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        input1: '',
        input2: '',
        input3: '',
        tableHeight: window.innerHeight - 152,
        tableLoading: true,
        tableData: [],
        treeDefaultProps: {
          children: 'children',
          label: 'name'
        },
        dialogCompanyVisible: false,
        dialogCompanyDisabled: false,
        dialogOfficeVisible: false,
        dialogOfficeDisabled: false,
        dialogMemberVisible: false,
        dialogMemberDisabled: false,
        companyDataLoading: true,
        officeDataLoading: true,
        memberDataLoading: true,
        dialogMoveMemberVisible: false,
        companyData: {},
        officeData: {},
        memberData: {},
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
        getRowKey(row) {
          return row.type + '-' + row.id;
        },
        getAttribute(row) {
          var tags = [];
          if(row.type == 1){
            tags.push({"name":"公司","type":""});
          } else if(row.type == 2){
            tags.push({"name":"部门","type":"success"});
          } else if(row.type == 3){
            tags.push({"name":"管理员","type":"warning"});
            tags.push({"name":"员工","type":"info"}); 
          } 
          return tags; 
        }
      }
    },
    mounted() {
      window.onresize = () => {
        console.log("窗口变化了。。。。。。。。。。。:" + window.innerHeight);
        this.pageResize();
      }
    },
    methods: {
      pageResize() {
        this.tableHeight = window.innerHeight - 150;
        console.log("重新设置窗口高度。。。。。。。。。。。:" + this.tableHeight);
      },
      load(tree, treeNode, resolve) {
        axios.get('/data/org_member_list_data.json')
          .then(function (response) {
            setTimeout(function () {
              resolve(response.data);
            }, 1000);
          })
          .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
          })
      },
      filterTag(value, row) {
        console.log(row);
        return row.type === value;
      },
      addItem(row, type) {
        if (type === 2) {
          // 添加部门
          this.officeData = {};
          this.officeData.type = 2;
          this.officeData.pid = row.id;
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = false;
          this.officeDataLoading = false;
        } else if (type === 3) {
          // 添加员工
          this.memberData = {};
          this.memberData.type = 3;
          this.memberData.pid = row.id;
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = false;
          this.memberDataLoading = false;
        }
      },
      moveMember(row) {
        this.dialogMoveMemberVisible = true;
      },
      selectScope(row) {
        console.log(row);
        if (row.type === 1) {
          this.dialogCompanyVisible = true;
          this.dialogCompanyDisabled = true;
          getCompanyData();
        } else if (row.type === 2) {
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = true;
          getOfficeData();
        } else if (row.type === 3) {
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = true;
          getMemberData();
        }
      },
      editScope(row) {
        console.log(row);
        if (row.type === 1) {
          this.dialogCompanyVisible = true;
          this.dialogCompanyDisabled = false;
          getCompanyData();
        } else if (row.type === 2) {
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = false;
          getOfficeData();
        } else if (row.type === 3) {
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = false;
          getMemberData();
        }
      }
    },
  });


  new function () {
    axios.get('/data/org_table_data.json')
      .then(function (response) {
        setTimeout(function () {
          console.log(response.data);
          vm.tableData = response.data;
          vm.tableLoading = false;
        }, 1000);
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      })
  };

  // 获取公司数据
  function getCompanyData(row) {
    vm.companyDataLoading = true;
    axios.get('/data/org_company_data.json')
      .then(function (response) {
        setTimeout(function () {
          vm.companyData = response.data;
          vm.companyDataLoading = false;
        }, 1000);
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
        vm.companyDataLoading = false;
      })
  }

  // 获取部门数据
  function getOfficeData(row) {
    vm.officeDataLoading = true;
    axios.get('/data/org_office_data.json')
      .then(function (response) {
        setTimeout(function () {
          vm.officeData = response.data;
          vm.officeDataLoading = false;
        }, 1000);
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
        vm.officeDataLoading = false;
      })
  }

  // 获取员工数据
  function getMemberData(row) {
    vm.memberDataLoading = true;
    axios.get('/data/org_member_data.json')
      .then(function (response) {
        setTimeout(function () {
          vm.memberData = response.data;
          vm.memberDataLoading = false;
        }, 1000);
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
        vm.memberDataLoading = false;
      })
  }



</script>

</html>